<script setup>
//导入pinia用户数据
import { ref } from "vue";
import {userInfoStore}from "../stores/UserInfoPinaStores";
let user= ref(userInfoStore());

</script>

<template>
  管理员界面
  <div class="userC">
        <div class="userTitle">
            <h1> 管理员信息页</h1>
            <br><br>
            <h3>欢迎<span v-text="user.getUserName"></span>到来</h3>
        </div>
       
        <div class="userContent">
            <div class="tb_content">
               <table style="width: 100%; height: 60%;">
               <tr class="trb">
                  <td class="name">用户ID</td ><td class="content" v-text="user.getUserId"></td> 
               </tr>
               <tr class="trb">
                  <td class="name">用户名字</td ><td class="content" v-text="user.getUserName" ></td>
               </tr>

               <tr class="trb">
                  <td class="name">用户性别</td ><td class="content" v-text="user.getUserSex"></td>
               </tr>

               <tr class="trb">
                  <td class="name">用户学号</td ><td class="content" v-text="user.getUserXh"></td>
               </tr>

               <tr class="trb">
                  <td class="name">用户电话号码</td ><td class="content" v-text="user.getUserPhone"></td>
               </tr>
               <tr class="trb">
                  <td class="name">用户身份</td ><td class="content" >
                     <span v-if="user.getUserStatus==0">普通用户</span>
                     <span v-if="user.getUserStatus==1">系统管理员</span>
                  </td>
               </tr>
            </table>
         </div>
        </div>
    </div>
</template>

<style scoped>

.userC{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 255, 255,1);
        background-image: url(../public/img/lo_bg.jpg);

        
    }
    .userTitle{
        width: 100%;
        height: 20%;
        background-color: rgb(224, 220, 214);
        
    }

   .userContent{
      width: 100%;
        height: 80%;
        background-color: rgb(224, 220, 214);
   }


   .name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }

</style>
